<template>
  <div class="hello">
    <h1><i>东软云医院HIS系统</i></h1>
    <h2>财务管理--费用科目管理</h2><hr>
    <div>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="24"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
                    <el-col :span="8"><el-button type="primary" @click="queryAll()">查询费用科目</el-button></el-col>
                    <el-col :span="8"><el-button type="primary" @click="dialogVisible = true"><i class="el-icon-edit"></i>新增费用科目</el-button></el-col>
                    <!-- 当dialogVisible = true，弹出窗体显示内容 -->
                    <el-dialog :visible.sync="dialogVisible">
                        <span>新增费用科目</span>
                        <el-form :model="addExpenseClassForm">
                            <el-form-item label="科目编码" >
                                <el-input v-model="addExpenseClassForm.expCode"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form :model="addExpenseClassForm">
                            <el-form-item label="科目名称" >
                                <el-input v-model="addExpenseClassForm.expName"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addNewExpenseClass()">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-row>
            </el-header>
        </el-container>
    </div>

    <div>
        <el-table :data="Exptable" style="width: 100%">
           <el-table-column label="药品单位" width="180" prop="ExpCode"></el-table-column>
           <el-table-column label="药品价格" width="180" prop="ExpName"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope"><i class="el-icon-edit-outline"></i>
                    <el-button size="mini" @click="updateAndselect(scope.$index, scope.row)">编辑</el-button>
                    <!-- 当dialogVisible = true，弹出窗体显示内容 -->
                    <el-dialog :visible.sync="updatedialogVisiblet">
                        <span>修改费用科目</span>
                        <el-form :model="updateExpenseClassForm">
                            <el-form-item label="科目编码" >
                                <el-input v-model="updateExpenseClassForm.expCode"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form :model="updateExpenseClassForm">
                            <el-form-item label="科目名称" >
                                <el-input v-model="updateExpenseClassForm.expName"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="updatedialogVisiblet = false">取 消</el-button>
                            <el-button type="primary" @click="updateNewExpenseClass()">确 定</el-button>
                        </span>
                    </el-dialog>
                    <el-button size="mini" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-row>
            <el-col :span="24">
                <el-pagination
                 background
                 layout="prev, pager, next"
                  :total="totalNumber"
                  :hide-on-single-page="pageShow"
                  @current-change="pageChange"><!-- 页码改变 -->
                </el-pagination>
            </el-col>
        </el-row>
    </div>

  </div>
</template>

<script>
  /* 将axios独立成为函数--导入 */
import {postRequest} from '../../utils/ajaxapi'
import {getRequest} from '../../utils/ajaxapi'

export default{
  data(){
      return{
          /* pageShow:true, */
          totalNumber:30,
          input:'',
          dialogVisible:false,
          updatedialogVisiblet:false,
          addExpenseClassForm:{
              expCode:'',
              expName:''
      },
          updateExpenseClassForm:{
              expCode:'',
              expName:''
      },
          Exptable:[
            {
              ExpCode:'CCTV5',
              ExpName:'中央5体育频道'
            }
          ]
      }
  },
  methods:{
        //显示所有
        queryAll(){
            /* let _this = this;
            alert("您好，欢迎进行测试！");
            this.$axios
            .get("/neuhis/expenseClass/queryAll")
            .then(response => {
                _this.msg = response.data;
            }); */
            if(this.input == null){
                this.input = ''
            }
            alert(this.input);
            this.getExps(1,10,this.input);
        },
        //指定条件查询
        getExps(pageNumber,pageSize,expN){
            let _this = this;
            getRequest("/neuhis/expenseClass/getExps?pageNumber="+pageNumber+"&pageSize="+pageSize+"&ExpName="+expN)
            .then(function(response){
                _this.Exptable = response.data.map;
                _this.totalNumber = response.data.totalNumber;
            });
        },
        //新增数据
        addNewExpenseClass(){
            let _this = this;
            alert("欢迎进入新增数据页面");
            this.$axios.
            post("/neuhis/expenseClass/addNewExpenseClass",this.addExpenseClassForm)
            .then(response => {
                console.log(response)
            });
            _this.dialogVisible = false;
        },
        //改变页码
        pageChange(pageNub){
            alert(pageNub);
            this.getExps(pageNub,10,'');
        },
        //编辑
        updateAndselect(index,clikeExp){
            let _this = this;
            _this.updatedialogVisiblet = true;
            _this.updateExpenseClassForm.expCode = this.Exptable[index].ExpCode;
            _this.updateExpenseClassForm.expName = this.Exptable[index].ExpName;
        },
		//删除

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
